/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */

import { categoryGet, categoryPost, companyPost, companyPut } from "@/api/pro";
import ImgUpload from "@/components/img-upload";
import RichEditor from "@/components/rich-editor";
import TencentMap from "@/components/tencent-map";
import { useAppDispatch, useAppSelector } from "@/store/hook";
import { userInfoUpdate } from "@/store/modules/user";
import { AddressType, CategoryType, CompanyType } from "@/types/pro";
import { Button, Col, Form, Input, Row, Select, Switch, Drawer } from "antd";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";

const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Setting: React.FC = () => {
  const [form] = Form.useForm();
  const [cateList, setCateList] = useState<Array<CategoryType>>([]);
  const [open, setOpen] = useState<boolean>(false);
  const [addressInfo, setAddressInfo] = useState<AddressType | null>(null);
  const { userInfo } = useAppSelector((state) => state.user);
  const dispatch = useAppDispatch(); //带有类型的自定义Hook
  // const dispatch = useDispatch()
  useEffect(() => {
    form.setFieldsValue(userInfo);
  }, []);
  const onFinish = (values: CompanyType) => {
    console.log(values);
    companyPut(
      userInfo!.objectId,
      { ...values, ...addressInfo },
      userInfo!.sessionToken
    ).then((res) => {
      dispatch(userInfoUpdate({ ...userInfo, ...values, ...addressInfo }));
    });
  };

  const onReset = () => {
    form.resetFields();
  };

  const onClose = () => {
    setOpen(false);
  };

  const handleAddress = (addressInfo: AddressType) => {
    setOpen(false);
    console.log(addressInfo);
    setAddressInfo(addressInfo);
    form.setFieldsValue(addressInfo);
  };

  return (
    <>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item name="name" label="公司名称" rules={[{ required: true }]}>
          <Input readOnly />
        </Form.Item>
        <Form.Item name="ceo" label="公司法人" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="capital" label="注册资本" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="industry" label="行业" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="icon" label="企业LOGO" rules={[{ required: true }]}>
          <ImgUpload />
        </Form.Item>
        <Form.Item label="公司地址">
          <Row>
            <Col span={18}>
              <Form.Item name="address" rules={[{ required: true }]}>
                <Input readOnly />
              </Form.Item>
            </Col>
            <Col>
              <Button
                type="primary"
                ghost
                onClick={() => {
                  setOpen(true);
                }}
              >
                地图选址
              </Button>
            </Col>
          </Row>
        </Form.Item>
        {/* <Form.Item name="desc" label="公司简介" rules={[{ required: true }]}>
          <RichEditor value={userInfo?.desc} />
        </Form.Item> */}

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            修改
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <Drawer
        title="地图选址"
        placement="bottom"
        height={500}
        onClose={onClose}
        open={open}
      >
        <TencentMap handleAddress={handleAddress} />
      </Drawer>
    </>
  );
};

export default Setting;
